<template>
  <div class="flowbox">
        <div>
<span class="words">今日流量</span> 
 <div class="flownumber">
       <span>{{flow1}}m³</span>
</div>
</div>
 </div>
</template>

<script setup lang="ts">
defineProps(['flow1'])
</script>

<style scoped>
.flowbox{
        background-image: url('@/assets/tap.png');
        background-position: left;
        background-repeat: no-repeat;
        background-size:150px ;
        width: 330px;
        height: 150px;
        border: gray solid 2px;
        border-radius: 5%;
        margin: 20px;
        box-shadow: 0 0 5px 1px #999 ;
        cursor: pointer;
        display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.flowbox:hover{
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.words{
        font-size: 25px;
        font-weight: 500;
        position: relative;
        top: 30px;
        left: 190px;
}
.flownumber{
        position: relative;
        top: 50px;
        font-size: 35px;
        font-weight: 800px;
        left: 60%;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
</style>
